<template>
  <div>
    <template v-if="showDetail">
      <el-empty description="无表单信息" v-if="form===null"></el-empty>
      <FormContext
        v-else
        :form="form"
        @back="onBack"
        @change="onFormSelect"
        @mode="onModeChange">
        <ColumnIndex :formId="formId" v-if="mode==='column'"></ColumnIndex>
        <ViewIndex :formId="formId" v-if="mode==='view'"></ViewIndex>
        <FormulaIndex :formId="formId" v-if="mode==='formula'"></FormulaIndex>
        <TemplateIndex :formId="formId" v-if="mode==='tmpl'"></TemplateIndex>
      </FormContext>
    </template>
    <template v-else>
      <FormIndex @change="onFormChange"></FormIndex>
    </template>
  </div>
</template>
<script>

import FormContext from './FormContext'
import DetailIndex from './DetailIndex'
import FormIndex from './FormIndex'
import ColumnIndex from '@/views/autoform/column/Index'
import ViewIndex from '@/views/autoform/view/Index'
import FormulaIndex from '@/views/autoform/formula/Index'
import TemplateIndex from '@/views/autoform/template/Index'
export default {
  components: {
    DetailIndex, FormIndex, FormContext, ColumnIndex, ViewIndex, FormulaIndex, TemplateIndex
  },
  data () {
    return {
      form: null,
      formId: '',
      showDetail: false,
      mode: 'column'
    }
  },
  mounted () {
  },
  methods: {
    onFormChange (obj) {
      this.form = obj
      this.formId = obj.id
      this.showDetail = true
    },
    onFormSelect (formId) {
      this.formId = formId
    },
    onBack () {
      this.showDetail = false
    },
    onModeChange (t) {
      this.mode = t.code
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
